<template>
  <div class="container--item__header">
    <img src="../../assets/register/left.png"
         class="container--img__left"
         @click="back"
         alt="#">
    <span class="container--header__text" ref="headerText">{{$route.meta.title}}</span>
    <span class="container--right__text"
          @click="edit" v-if="$route.meta.rightTextBoole">{{edits}}</span>
  </div>
</template>

<script>
/* eslint-disable*/
export default {
  name: 'headers',
  data() {
    return {
      edits: '编辑',
      detailPageCommodityMsg: null,
      shoppingCart: null,
      account: null,
      bottom: null,
      searchCommodityData: null,
    };
  },
  methods: {
    back() {
      if (this.$refs.headerText.innerHTML === '忘记密码') this.$router.push({ name: 'auth' });
      if (this.$refs.headerText.innerHTML === '收货地址') {
        console.log(this.$route.params);
        this.$route.params.data === 0 ?
          this.$router.push({ name: 'account', params: this.account }) :
          this.$router.push({ name: 'personal' })
      }
      if (this.$refs.headerText.innerHTML === '添加收货地址') this.$route.params.data === 1 ?
        this.$router.push({ name: 'account', params: this.account }) :
        this.$router.push({ name: 'addressWarehouse', params: { data : 0 } });
      if (this.$refs.headerText.innerHTML === '我的订单') this.$router.push({ name: 'personal' });
      if (this.$refs.headerText.innerHTML === '爆款秒杀') this.$router.push({ name: 'shoppingMall' });
      if (this.$refs.headerText.innerHTML === '购物车') {
        if (this.bottom !== 1 && this.detailPageCommodityMsg && this.bottom !== 'searchCommodity') {
          this.$router.push({ name: 'detailPage', params: this.detailPageCommodityMsg });
          this.detailPageCommodityMsg = null;
        } else if (this.bottom === 'searchCommodity') {
          this.$router.push({ name: 'searchCommodity', params: { data: this.searchCommodityData }});
          this.bottom = null;
        } else {
          this.$router.push({ name: 'shoppingMall'});
          this.bottom = null;
        }
      }
      if (this.$refs.headerText.innerHTML === '确认订单') this.$router.replace({ name: 'shoppingCart' });
      if (this.$refs.headerText.innerHTML === '在线支付') this.$router.replace({ name: 'account', params: this.account });
      if (this.$refs.headerText.innerHTML === '正在支付') {
        this.$router.replace({ name: 'onlinePayment', params: this.$store.state.ConfirmPayment})
      }
    },
    edit() {
      this.edits = this.edits === '编辑' ? '完成' : '编辑';
      this.$bus.$emit('edit');
    },
  },
  created() {
    this.$bus.$on('aPPDetailPageCommodityMsg', (data) => this.detailPageCommodityMsg = data);
  },
  watch: {
    '$route': function (to,from) {
      if (to.name === 'account') this.account = this.$route.params;
      if (to.name === 'detailPage') this.detailPageCommodityMsg = this.$route.params;
      if (to.name === 'shoppingCart' && from.name === 'shoppingMall' || from.name === 'personal') this.bottom = 1;
      if (to.name === 'shoppingCart' && from.name === 'searchCommodity') {
        this.bottom = 'searchCommodity';
        console.log(this.$route.params.data);
        this.searchCommodityData = this.$route.params.data
      }
    }
  }
};
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
    .container--item__header{
      position: relative;
      width: 100vw;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      .container--img__left{
        position: absolute;
        width: .5rem;
        height: .5rem;
        padding: .367rem;
        z-index: 999;
      }
      .container--header__text{
        position: relative;
        font-size: .42666rem;
        text-align: center;
        display: block;
        margin: auto;
        line-height: 1.25rem;
        /*letter-spacing: 2px;*/
      }
      .container--right__text{
        position: absolute;
        font-size: .4rem;
        text-align: center;
        display: inline-block;
        line-height: 1.25rem;
        right: .35rem;
        top: 0;
        color: #5c5c5c;
      }
    }
  }
</style>
